<template>
  <div class="file-preview-container">
    <div v-if="loading" class="preview-loading">
      <el-icon class="is-loading"><loading /></el-icon>
      <span>加载中...</span>
    </div>
    <div v-else class="preview-content">
      <!-- PDF 预览 -->
      <VueOfficePdf v-if="fileType === 'pdf'" :src="fileUrl" />

      <!-- Word 文档预览 -->
      <VueOfficeDocx v-else-if="fileType === 'docx' || fileType === 'doc'" :src="fileUrl" />

      <!-- Excel 表格预览 -->
      <VueOfficeExcel v-else-if="fileType === 'xlsx' || fileType === 'xls'" :src="fileUrl" />

      <!-- PPT 演示文稿预览 -->
      <VueOfficePptx v-else-if="fileType === 'pptx' || fileType === 'ppt'" :src="fileUrl" />

      <!-- 文本文件预览 -->
      <div v-else-if="fileType === 'txt'" class="text-preview-container">
        <pre class="text-preview">{{ textContent }}</pre>
      </div>

      <!-- 不支持的文件类型 -->
      <div v-else class="preview-placeholder">
        <p>暂不支持预览该文件类型({{ fileExt }})。</p>
        <p>您可以 <a :href="fileUrl" target="_blank">下载文件</a> 后查看。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { fileSuffix } from '../../utils';
import VueOfficePdf from '@vue-office/pdf';
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
import VueOfficePptx from '@vue-office/pptx';

const props = defineProps({
  file: {
    type: Object,
    required: true
  },
  visible: {
    type: Boolean,
    default: false
  }
});

const loading = ref(false);
const textContent = ref('');
const fileExt = ref('');

// 计算文件URL
const fileUrl = computed(() => {
  return props.file?.oss_url || '';
});

// 计算文件类型
const fileType = computed(() => {
  if (!props.file?.name) return '';

  const ext = fileSuffix(props.file.name).toLowerCase();
  fileExt.value = ext;

  if (ext === '.pdf') return 'pdf';
  if (ext === '.docx' || ext === '.doc') return 'docx';
  if (ext === '.xlsx' || ext === '.xls') return 'xlsx';
  if (ext === '.pptx' || ext === '.ppt') return 'pptx';
  if (ext === '.txt') return 'txt';

  return 'unsupported';
});

// 监听文件变化或可见性变化，重新加载预览
watch(
  () => [props.file, props.visible],
  ([newFile, newVisible]) => {
    if (newFile && newVisible) {
      previewFile();
    }
  }
);

onMounted(() => {
  if (props.file && props.visible) {
    previewFile();
  }
});

// 预览文件
const previewFile = async () => {
  if (!props.file || !fileUrl.value) return;

  loading.value = true;
  textContent.value = '';

  try {
    // 如果是文本文件，需要获取内容
    if (fileType.value === 'txt') {
      try {
        const response = await fetch(fileUrl.value);
        const text = await response.text();
        textContent.value = text;
      } catch (error) {
        console.error('文本文件加载错误:', error);
        textContent.value = '无法加载文本内容，请下载后查看。';
      }
    }
  } catch (error) {
    console.error('预览文件出错:', error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="scss">
.file-preview-container {
  height: 100%;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 16px;
    color: #909399;

    .el-icon {
      font-size: 32px;
      margin-bottom: 10px;
    }
  }

  .preview-content {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;

    :deep(.vue-office-pdf) {
      height: 100%;
      width: 100%;
    }

    :deep(.vue-office-docx) {
      height: 100%;
      width: 100%;

      .docx-wrapper {
        max-width: 100%;
        margin: 0 auto;

        section.docx {
          width: 100% !important;
          max-width: 100%;
          box-sizing: border-box;
          padding: 20px !important;
          margin: 0 auto;
        }
      }
    }

    :deep(.vue-office-pdf-wrapper) {
      height: 100%;
    }

    :deep(.vue-office-excel) {
      height: 100%;
      width: 100%;
    }

    :deep(.vue-office-pptx) {
      height: 100%;
      width: 100%;
    }

    .text-preview-container {
      height: 100%;
      overflow: auto;
      background-color: #f8f9fa;
      border-radius: 4px;
      padding: 10px;
    }

    .text-preview {
      white-space: pre-wrap;
      font-family: monospace;
      padding: 15px;
      overflow: auto;
      max-height: 100%;
      color: #000;
    }

    .preview-placeholder {
      padding: 20px;
      text-align: center;
      background-color: #f8f9fa;
      border-radius: 4px;
      margin: 20px 0;

      p {
        margin: 10px 0;
      }

      a {
        color: #2D66B3;
        text-decoration: none;
        font-weight: bold;
      }
    }
  }
}
</style>
